// 使用node内置的模块
const path = require('path')
// 处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 在每次编译的时候自动把之前的dist目录删除掉
const { CleanWebpackPlugin } = require('clean-webpack-plugin')




// 使用的 CommonJS 模块化方案
module.exports = {
    // 模式
    mode: 'development',
    // 入口
    entry: {
      // 注册一个引入公共css的js模块
      commonCSS: './src/js/common-js/commonCss.js',
      index: './src/js/index.js',
      register: './src/js/register.js',
      login: './src/js/login.js',
      // 声明公共的js
      dom: './src/js/common-js/dom.js',
      http: './src/js/common-js/http.js',
      utils: './src/js/common-js/utils.js'
    },
    // 出口
    output: {
      // __dirname 代表当前文件所在的绝对路径
      path: path.resolve(__dirname, 'dist'),
      filename: 'js/[name]-[hash:8].js'
    },
    // 模块
    module: {
      rules: [
        {
          test: /\.css$/,  // 匹配所有.css文件
          use: [
                     {
                            loader: MiniCssExtractPlugin.loader, // 提取css
                            options: {
                              publicPath: '../' // 输出路径
                            }},
                              'css-loader']},

        {
          test: /\.less$/,  // 匹配所有.less文件
          use: [         {
                        loader: MiniCssExtractPlugin.loader, // 提取css
                        options: {
                          publicPath: '../' // 输出路径
                        }},
            'css-loader', 'less-loader'] },
        {
          test: /\.(jpg|png|gif|jpeg)$/,
          loader: 'url-loader',
          options: {
            name: '[hash:16].[ext]',  // 图片输出的名字hash长度16位 默认32位
            limit: 2 * 1024 * 1024,  // 小于2mb base64处理
            // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
            esModule: false,
          }
        },
        {
          test: /\.html$/, // 处理html中引入img
          loader: 'html-loader'
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/,  // 处理字体格式文件
          loader: 'file-loader',
          options: {
            name: '[hash:16].[ext]', // 输出名字
            outputPath: 'fonts' // 输出路径
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',    // loader 编译es6为es5
          exclude: /node_modules/  // 排除
        }
      ]
    },
    // 插件
    plugins: [
      // 处理html
      new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: './index.html',
        chunks: ['index', 'commonCSS', 'dom', 'http', 'utils']
      }),
      new HtmlWebpackPlugin({
        template: './src/register.html',
        filename: './register.html',
        chunks: ['register', 'commonCSS', 'dom', 'http']
      }),
      new HtmlWebpackPlugin({
        template: './src/login.html',
        filename: './login.html',
        chunks: ['login', 'commonCSS']
      }),
      new MiniCssExtractPlugin({ // 提取css
        filename: 'css/[name].css'
      }),
      // 压缩css
      new OptimizeCssAssetsWebpackPlugin(),
      new CleanWebpackPlugin()
    ],
  
    // 配置虚拟服务 devServer
    devServer: {
      // 自动打开浏览器
      open: true,
      // 自定义端口
      port: 9527,
      // 启动服务器目录
      contentBase: path.resolve(__dirname, 'dist'),
      // 启动gzip压缩
      compress: true
    }
  }